<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据监视</title>
    <script src="../../js/vue.js"></script>
    <style>
        button {
            margin-top: 20px
        }
    </style>
</head>
<body>
<div class="root">
    <h1>学生信息</h1>
    <button @click="addAge">年龄+1</button>
    <br>
    <button @click="addSex">添加性别属性,默认值为男</button>
    <br>
    <button @click="changeSex">修改性别属性</button>
    <br>
    <button v-on:click="addFriend">在列表首位添加一个朋友</button>
    <br>
    <button @click="changeFriend">修改第一个朋友的名字为:张三</button>
    <br>
    <button @click="addHobby">添加一个爱好</button>
    <br>
    <button @click="changeHobby">修改第一个爱好为:开车</button>
    <br>
    <button @click="filterHobby">过滤掉爱好中的抽烟</button>
    <br>
    <h3>姓名:{{student.name}}</h3>
    <h3>年龄:{{student.age}}</h3>
    <h3 v-if="student.sex">性别:{{student.sex}}</h3>
    <h3>爱好：</h3>
    <ul>
        <li v-for="(value,index) in student.hobby" :key="index">
            {{value}}
        </li>
    </ul>
    <h3>朋友们:</h3>
    <ul>
        <li v-for="(value,index) in student.friends" :key="index">
            {{value.name}}=>{{value.age}}
        </li>
    </ul>

</div>

<script>
    const vm = new Vue({
        el: ".root",
        data: {
            student: {
                name: 'tom',
                age: 18,
                hobby: ['抽烟', '喝酒', '敲代码'],
                friends: [
                    {name: 'aimi', age: 23},
                    {name: 'jerry', age: 35},
                    {name: 'tony', age: 32},

                ]
            }


        },
        methods: {
            addAge() {
                console.log(this)
                this.student.age = this.student.age + 1
            },
            addSex() {
                this.$set(this.student, 'sex', '男')

            },
            changeSex() {
                if (this.student.sex === '男') {
                    this.student.sex = '女'
                } else this.student.sex = '男'
            },
            addFriend() {
                this.student.friends.unshift({name: 'jack', 'age': 19})
            },
            changeFriend() {
                this.student.friends[0].name = '张三'
            },
            addHobby() {
                this.student.hobby.unshift('烫发')
            },
            changeHobby() {
                this.student.hobby[0] = '开车'
            },
            filterHobby() {
                this.student.hobby = this.student.hobby.filter((p) => {
                    return p !== '抽烟'
                })
            }
        }
    })
    // console.log(vm)
    /**
     * vue会监测data中所有的数据
     *
     * 监测原理:
     *      通过setter实现监视,且要在 new vue时就传入要检测的数据(也就是在配置项中)
     *      1.对象中后追加的属性,vue默认不做响应式处理
     *      2.如需给后添加的属性做响应式需要使用如下的API   Vue.$set(target,Name,Value)
     *
     *  如何监测数组中的数据?
     *      通过包裹数组更新元素的方法实现,本质上做了两件事
     *          1.调用原生对应的方法对数组进行更新
     *          2.重新解析模板,更新界面
     *  在Vue修改数组中的某个元素一定要用如下方法
     *      1. 使用这些API：`push()、pop()、shift()、unshift()、splice()、sort()、reverse()`
     *      2. `Vue.set('数组对象','下标','值') 或 vm.$set('数组对象','下标','值')
     *
     * 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data等） 添加属性,只能给data里边的对象元素添加属性
     */
</script>
</body>
</html>